<template>
	<view>
		<view class="box" style="margin-top: 10px;">
			<view class="head">
				电池ID：
			</view>
			<view class="input-box">
				<input placeholder="请输入" @input="id" v-model="cId" />
			</view>
		</view>

		<view class="box" style="margin-top: 10px;">
			<view class="head">
				电池容量：
			</view>
			<view class="input-box">
				<input placeholder="请输入" @input="name" v-model="cCap" />
			</view>
		</view>

		<view class="box" style="margin-top: 10px;">
			<view class="head">
				电池其他：
			</view>
			<view class="input-box">
				<input placeholder="请输入" @input="other" v-model="cOther" />
			</view>
		</view>

	</view>
</template>

<script>
	import store from '@/store/index.js'; //需要引入store
	export default {
		data() {
			return {
				cCap: '',
				cId: '',
				cOther: '',
			}
		},
		onLoad() {
			store.commit("setSendMsg", "")
			const msg = {
				type: 2,
				data: 'L'
			}
			store.commit("setSendMsg", msg)
		},
		computed: {
			msg() {
				return store.state.rfidMsgt
			}
		},
		watch: {
			msg: {
				deep: true,
				handler() {
					this.cId = store.state.rfidMsgt.id
					this.cCap = store.state.rfidMsgt.cap
					this.cOther = store.state.rfidMsgt.other
				}
			}
		},
		methods: {
			name: function(e) {
				this.cCap = e.target.value
			},
			id: function(e) {
				this.cId = e.target.value
			},
			other: function(e) {
				this.cOther = e.target.value
			},
		}
	}
</script>

<style>
	.box {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.head {
		width: 20%;
		margin-right: 3%;
	}

	.input-box {
		width: 200px;
		height: 30px;
		line-height: 50px;
		border: 0.5px solid #2c313c;
		border-radius: 10px;
	}

</style>
